<template>
	<view class="userInfo">
		<tui-list-view>
			<tui-list-cell arrow>
				<view class="cell">
					<view class="label">
						头像
					</view>
					<view class="val">
						<image @click="chooseImg" :src="userInfo.headImgUrl||'/static/images/mall/mine_def_touxiang_3x.png'" mode="widthFix" class="icon"></image>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell arrow>
				<view class="cell">
					<view class="label">
						昵称
					</view>
					<view class="val">
						<input type="text" placeholder="输入昵称" :disabled="disabled" v-model="userInfo.userName">
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell arrow>
				<view class="cell">
					<view class="label">
						性别
					</view>
					<view class="val">
						<tui-radio-group name="radio" v-model="userInfo.gender">
							<tui-radio :checked="userInfo.gender == '1'" value="1" color="#FFAC50" borderColor="#999"></tui-radio><text class="gender">男</text>
							<tui-radio :checked="userInfo.gender == '0'" value="0" color="#FFAC50" borderColor="#999">女</tui-radio><text class="gender">女</text>
						</tui-radio-group>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell arrow>
				<view class="cell">
					<view class="label">
						生日
					</view>
					<view class="val" @click="selDate">
						<view v-if="!userInfo.birthday" style="color: #999;" >请选择生日</view>
						<view v-else>{{userInfo.birthday}}</view>
					</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view style="height: 100rpx;"></view>
		<view class="subBtn"><view class="button" @click="submit">保存</view></view>
		<!-- 日期选择 -->
		<tui-datetime :type="2" ref="dateTime" :startYear="1900" @confirm="dateTime"></tui-datetime>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				userInfo: {
					headImgUrl: '',
					userName: '',
					gender: '0',
					birthday: '',
				},
				disabled: false,
			};
		},
		computed: {

		},
		watch: {

		},
		onLoad() {
			util.request('user/baseInfo').then(res => {
				if (res.code === 0) {
					res.data.gender = res.data.gender + ''
					this.userInfo = res.data;
					console.log(this.userInfo);
				}
			});
		},
		onShow() {

		},
		methods: {
			// 打开时间选择
			selDate() {
				this.$refs.dateTime.show();
			},
			// 时间选取
			dateTime(e) {
				this.userInfo.birthday = e.result;
			},
			// 修改头像
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths[0]
						util.uploadFile('upload/upload', tempFilePaths).then(function(resp) {
							that.userInfo.headImgUrl = resp.url;
						})
					}
				})
			},
			submit() {
				if (!this.userInfo.userName) {
					return util.toast('请输入昵称');
				}
				if (!this.userInfo.gender) {
					return util.toast('请输入性别');
				}
				if (!this.userInfo.birthday) {
					return util.toast('请输入生日');
				}
				uni.showLoading({
					title: '提交中...'
				})
				util.request('user/updateBaseInfo', this.userInfo , 'POST').then(function(res) {
					uni.hideLoading();
					if (res.code == 0) {
						util.toast('修改成功');
						setTimeout(function() {
							uni.navigateBack(1)
						}, 1000)
					} else {
						util.toast(res.msg);
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.userInfo {
		padding: 20rpx 30rpx;
		/deep/.tui-list-content {
			border-radius: 16rpx;
			overflow: hidden;
		}
		.head {
			width: 100%;
			padding: 60rpx 0;
			background: #fff;
			text-align: center;
			.icon {
				width: 100rpx;
				height: 100rpx;
			}
			.text {
				font-size: 28rpx;
				color: #333;
				padding-top: 10rpx;
			}
		}
		
		.cell {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333;
			font-size: 28rpx;
			padding: 0 30rpx 0 0;
			.label {
				width: 140rpx;
				flex-shrink: 0;
				font-weight: bold;
			}
			.icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.val {
				// width: 100%;
				.gender {
					margin: 0 10rpx 0 20rpx;
				}
				input {
					text-align: right;
				}
			}
		}
	}
</style>
